<style>
@media print {
  ._wz_trainingSyllabus_DailyTrai {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_cent_main _wz_trainingSyllabus_DailyTrai"  ref="trainingSyllabusDailyTrai">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="12%">
        <col width="12%">
        <col width="17%">
        <col width="12%">
        <col width="17%">
        <col width="12%">
        <col width="23%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;text-align: center;font-size: 16px;position: relative;" colspan="7">
          {{selectData.deptName}}
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      <template v-for="item in syllabusTrainCoursePrint">
        <tr style="border-top: 3px solid;">
          <td style="text-align: right;font-weight: 600;" :rowspan="4 + item.materialTrainList.length + (item.trainCoursePlanExam == 1?1:0)">{{!!item.createYear?item.createYear:'--'}}年{{!!item.createYear?item.createMonth:'--'}}月</td>
          <td style="text-align: right;font-weight: 600;">培训课程</td>
          <td colspan="3">{{!!item.trainCoursePlanName?item.trainCoursePlanName:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">培训时间</td>
          <td>{{!!item.trainCoursePlanBeginDate?item.trainCoursePlanBeginDate:'--'}} 至 {{!!item.trainCoursePlanEndDate?item.trainCoursePlanEndDate:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">培训类型</td>
          <td>{{!!item.trainCoursePlanTypeName?item.trainCoursePlanTypeName:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">培训方向</td>
          <td>{{!!item.trainCoursePlanDirectionName?item.trainCoursePlanDirectionName:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">随堂测验</td>
          <td>
            <template v-if="item.trainCoursePlanExam  == 1">
              {{item.materialExamName}}
            </template>
            <template v-else>未添加</template>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">课题数量</td>
          <td>{{!!item.trainCoursePlanMaterialNumber?item.trainCoursePlanMaterialNumber:0}}</td>
          <td style="text-align: right;font-weight: 600;">培训时长</td>
          <td>{{!!item.trainCoursePlanTotalDuration?item.trainCoursePlanTotalDuration:0}}分钟</td>
          <td style="text-align: right;font-weight: 600;">运输类型</td>
          <td>{{!!item.trainCoursePlanTransportTypeName?item.trainCoursePlanTransportTypeName:'--'}}</td>
        </tr>
        <tr>
          <td colspan="6" style="font-weight: 600;text-align: center;">培训课件</td>
        </tr>
        <template v-if="item.materialTrainList.length > 0">
          <template v-for="items in item.materialTrainList">
            <tr>
              <td colspan="6">
                <i class="fa fa-file-movie-o" v-if="items.materialTrainType == 1" style="color: #2d8cf0;"></i>
                <i class="fa fa-file-word-o" v-else style="color: #009688;"></i>
                <span style="margin: 0 10px 0 6px;">{{items.materialTrainName}}</span>
                {{items.materialTrainDuration}}分钟
              </td>
            </tr>
          </template>
        </template>
        <template v-else>
          <tr>
            <td colspan="6" style="font-weight: 600;text-align: center;">未添加课件</td>
          </tr>
        </template>
        <template v-if="item.trainCoursePlanExam == 1" >
          <tr>
            <td colspan="6">
              <span style="margin: 0 10px 0 0;">《{{item.materialExam.materialExamName}}》</span>
              <span style="margin: 0 10px 0 0;">考题：{{item.materialExam.materialExamAmount}}-题</span>
              <span style="margin: 0 10px 0 0;">总分：{{item.materialExam.materialExamTotalScore}}分</span>
              <span style="margin: 0 10px 0 0;">及格分：{{item.materialExam.materialExamPassScore}}分</span>
            </td>
          </tr>
        </template>
      </template>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      syllabusTrainCoursePrint:[],
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    that.$Spin.show();//显示加载
    that.axios.post(that.apiUrl.educateSyllabusSyllabusTrainCoursePrint, that.selectData).then(res => {
      that.$Spin.hide();//显示加载
      if (!!res) {
        that.syllabusTrainCoursePrint = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.trainingSyllabusDailyTrai) // 使用
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="less">
._wz_trainingSyllabus_DailyTrai {
  height: 100%;
  overflow: auto;

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }


}

</style>
